<template>
	<view class="pageStyle">
		<view style="margin: 20rpx 0;">
			<uni-search-bar placeholder="按标题搜索" :show-action="false" :input-style="{fontSize:'28rpx'}" :height="50"
				v-model:modelValue="queryParam.what" bgColor="#EEEEEE"></uni-search-bar>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;margin: 20rpx 0;">
			<button size="mini" :hover-class="'buttons'"
				:style="{width:'200rpx',backgroundColor:'#0097ff',border:'none',color:'#fff', fontSize:'32rpx'}"
				@click="searchList">查询</button>
		</view>
		<uni-swipe-action ref="swipeAction">
			<uni-swipe-action-item v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx;">
				<view class="content_box" @longpress="handleLongpress">
					<view class="content_box_top">
						<view class="content_box_checkbox" v-if="isChecked">
							<checkbox :checked="item.checked" style="transform:scale(0.7)"
								@change.stop="checkboxChange($event,item)"></checkbox>
						</view>
						<view class="title" @click="appealDetails(item, index)">{{ item.title }}</view>
						<view class="icon" @click="appealDetails(item, index)">
							<uni-tag
								:text="item.haveread ? '已读' : '未读'" shape="circle"
								:type="item.haveread ? 'success' : 'error'" :inverted="true"
								:style="item.haveread ? 'border-color:#48D4D0; color:#48D4D0; font-size: 14px; font-weight: 400':'border-color:#f97122; color:#f97122; font-size: 14px; font-weight: 400'"
								 />
						</view>
					</view>
					<view class="content_box_bottom" @click="appealDetails(item, index)">
						<view>{{ item.sender }}</view>
						<view>{{ item.createdate }}</view>
					</view>
				</view>
				<template v-slot:right>
					<view class="slot-button">
						<view class="slot-button-con" style="background-color:#ff5a5f"
							@click="swipeClick({ content: { text: '删除' } }, index, item)">
							<text class="slot-button-text">删除</text>
						</view>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="body_bottom" v-if="isChecked">
			<view @click="_handleCancel">
				取消
			</view>
			<view @click="_handleSelectAll">
				全选
			</view>
			<view @click="_handleDeleteBatch" style="color:red">
				删除
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		useList
	} from '@/pages/use/useList';
	import {
		postFormAction,
	} from "@/utils/request.js";

	const describe = '系统消息'
	const url = {
		list: '/public/message/list',
		del: '/public/message/del'
	}
	const isChecked = ref(false)
	const store = useStore()
	const loginInfo = computed(() => store.state.loginInfo)
	const {
		page,
		queryParam,
		list,
		getListData,
		getOnReachBottom
	} = useList({
		url: url,
		isGet: false,
		loadHock: true,
		queryParam: {
			skey: loginInfo.value.skey
		}

	})

	//改变checkbox状态
	const checkboxChange = (e, item) => {
		item.checked = e.value
	}
	//全选
	const _handleSelectAll = () => {
		list.value.forEach(item => {
			item.checked = true
		})
		list.value = [...list.value]
	}
	//取消全选
	const _handleCancel = () => {
		list.value.forEach(item => {
			item.checked = false
		})
		list.value = [...list.value]
		isChecked.value = false
	}
	//批量删除
	const _handleDeleteBatch = () => {
		let selectList = list.value.filter(item => item.checked);
		let checkes = selectList.map(item => item.id);
		if (checkes.length == 0) {
			uni.showToast({
				title: '请选择数据',
				icon: 'none'
			});
			return;
		}
		const ids = checkes.join(',');

		uni.showModal({
			title: "提示",
			content: "您确定删除么？",
			success: async (res) => {
				if (res.confirm) {
					handleDeleteBatch(ids);
				}
			}
		})
	}
	//长按
	const handleLongpress = () => {
		isChecked.value = true;
	}
	const searchList = () => {
		page.value = 1;
		getListData();
	}
	const appealDetails = (item, index) => {
		uni.navigateTo({
			url: `/application/news/newsShowPage?record=${JSON.stringify(item)}`
		});
	}

	//删除
	const swipeClick = (e, index, item) => {
		let {
			content
		} = e;
		if (content.text === "删除") {
			uni.showModal({
				title: "提示",
				content: "是否确定删除",
				success: (res) => {
					if (res.confirm) {
						handleDelete(item, index);
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		}
	}
	//单个删除
	const handleDelete = (record, index) => {
		postFormAction(url.del, {
			ids: record.id,
		}).then((res) => {
			uni.showToast({
				title: res.msg,
			});
			if (res.code == 200) {
				list.value.splice(index, 1);
			}
		});
	}
	//单个删除
	const handleDeleteBatch = (ids) => {
		postFormAction(url.del, {
			ids: ids,
		}).then((res) => {
			uni.showToast({
				title: res.msg,
			});
			if (res.code == 200) {
				searchList()
			}
		});
	}
</script>
<style lang="scss" scoped>
	.pageStyle {
		height: 100%;
		background-color: #f9f9f9;
		overflow-y: auto;
		padding: 20rpx 30rpx 100rpx;

		.content_box {
			background: #ffffff;
			padding: 40rpx;
			border-radius: 15rpx;
			box-shadow: -3rpx 0px 22rpx 3rpx rgba(87, 193, 189, 0.2);

			&_checkbox {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.content_box_top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				align-items: center;

				.title {
					font-size: 34rpx;
					font-weight: 400;
					color: #323232;
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					flex: 1
				}
			}

			.content_box_bottom {
				font-size: 28rpx;
				font-weight: 400;
				color: #7d7d7d;
				display: flex;
				justify-content: space-between;
			}
		}

		.slot-button {
			/* #ifndef APP-NVUE */
			display: flex;
			height: 100%;
			/* #endif */
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			padding-bottom: 20rpx;

			.slot-button-con {
				height: 100%;
				width: 100%;
				padding: 0 20rpx;
				//   border-radius: 16rpx;
				/* #ifndef APP-NVUE */
				display: flex;
				height: 100%;
				/* #endif */
				display: flex;
				// flex: 1;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.slot-button-text {
				color: #ffffff;
				font-size: 14px;
			}
		}

		.body_bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			/* #ifdef H5 */
			bottom: 130rpx;
			/* #endif */
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>